<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>商品列表</h2>
    <div v-for="item in goodsList" :key="item.goodsId">
      <h3>{{item.goodsName}}</h3>
      <p>商品价格 {{item.goodsPrice | currency}}</p>
      <p>库存数量 {{item.storeNum}}</p>
      <p>添加时间 {{item.addTime | date}}</p>
        <button @click="addGoods(item.goodsId)">加入购物车</button>
      <hr/>
    </div>
      <h2 v-if="cartList.length===0">购物车什么都没有......</h2>
      <template v-else>
          <h2>购物车列表</h2>
          <div v-for="item in cartList" :key="'cart'+item.goodsId">
              <h3>{{item.goodsName}}</h3>
              <p>商品价格 {{item.goodsPrice | currency}}</p>
              <p>商品数量 <button @click="cutGoods(item.goodsId)">-</button> {{item.goodsNum}} <button @click="addGoods(item.goodsId)">+</button> </p>
              <p>小计 : {{item.goodsPrice * item.goodsNum | currency}}</p>
              <hr/>
          </div>
          <h3>总计{{sumPrice}}</h3>
      </template>

  </div>
</body>
<script type="module">
  import vueFilters from "./lib/VueFilters.js";
  new Vue({
    el:'#root',
    data:{
      cartList:[],
      goodsList:[
        {
          goodsId:1,
          goodsName:"电脑",
          goodsPrice:12345,
          storeNum:10,
          addTime:Date.now()-999999999
        },
        {
          goodsId:2,
          goodsName:"手机",
          goodsPrice:8888,
          storeNum:5,
          addTime:Date.now()-88888888
        }
      ]
    },
    filters:vueFilters,
    methods:{
          addGoods(id){
              const goodsInfo = this.goodsList.find(it=>it.goodsId===id)
              if(goodsInfo.storeNum>0){
                  const cartInfo = this.cartList.find(it=>it.goodsId===id);
                  goodsInfo.storeNum--;
                  if(cartInfo){
                      cartInfo.goodsNum++;
                  }else {
                      this.cartList.unshift({
                          goodsId:goodsInfo.goodsId,
                          goodsName : goodsInfo.goodsName,
                          goodsPrice : goodsInfo.goodsPrice,
                          goodsNum : 1
                      })
                  }
              }else {
                  alert('库存不足')
              }
          },
          cutGoods(id){
              const cartInfo = this.cartList.find(it=>it.goodsId===id);
              const goodsInfo = this.goodsList.find(it=>it.goodsId===id)
              if(cartInfo.goodsNum > 1){
                  cartInfo.goodsNum--;
                  goodsInfo.storeNum++;
              }else {
                  this.cartList = this.cartList.filter(item=>{
                      return item.goodsId !== id;
                  })
                  goodsInfo.storeNum++;
              }
          }
      },
    computed:{
        sumPrice(){
            return this.cartList.reduce((sum,item)=>{
                sum += item.goodsPrice * item.goodsNum;
                return sum;
            },0)
        }
    }
  })
</script>
</html>